<!--
/**
* Author: KSJ
* Date: 2022-07-27 20:06
* Desc: 影城信息
*/
-->
<!-- by your name -->
<template>
  <view class="cinema-item" @click="aa">
    <view class="flex mb25 flex-bottom">
      <view class="ell fb fs32 w7">{{ cinemaName }}</view>
      <view class="flex-right fc8 fs26" v-if="lowTicket > 0">
        <price :has-unit="false" :price="lowTicket" price-size="36" color="#FFB415"></price>
        元起</view
      >
    </view>
    <view class="flex flex-m mb15">
      <view class="ell w6 fc8 fs26"> {{ address }}</view>
      <view class="fc8 flex-right fs26"> {{ distance | getDistanceTxt }}</view>
    </view>
    <view v-if="planListStr" class="ell w8 fc8 fs26">近期场次：{{ planListStr }}</view>
  </view>
</template>

<script>
  import Price from '@/components/Price'
  export default {
    name: '',
    components: {
      Price
    },

    props: {
      cinemaName: {
        type: String
      },
      item: {
        type: Object
      },
      address: {
        type: String
      },
      planList: {
        type: Array,
        default: () => {
          return []
        }
      },
      lowTicket: {
        type: [String, Number]
      },
      distance: {
        type: [String, Number]
      }
    },
    computed: {
      planListStr() {
        if (this.planList.length > 0) {
          return this.planList.join(' | ')
        }
        return ''
      }
    },
    data() {
      return {}
    },
    methods: {
      aa() {
        this.$emit('handeClick', this.item)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .cinema-item {
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-bottom: solid 1rpx #eee;
    .has-active {
      padding: 2rpx 6rpx;
      background: #ffb415;
      border-radius: 6rpx;
      color: #fff;
      font-size: 24rpx;
      margin-right: 8rpx;
    }
  }
</style>
